import React from 'react';
import { Card, Row, Col } from 'antd';
import uiStore from '../store/uiStore';

import drill1 from '../images/drill1.jpg';
import drill2 from '../images/drill2.jpg';
import drill3 from '../images/drill3.jpg';
import drill4 from '../images/drill4.jpg';
import drill5 from '../images/drill5.jpg';

export  default class ImagePage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: 'drill 1',
      imagePath: drill1,
    };
  }

  componentDidMount() {
    uiStore._randomImage = () => {
      let newName = '';
      let newImagePath = '';

      while(true) {
        let i = Math.floor(Math.random()*5+1);
        switch(i) {
          case 1:
            newName = 'drill1';
            newImagePath = drill1;
            break;
          case 2:
            newName = 'drill2';
            newImagePath = drill2;
            break;
          case 3:
            newName = 'drill3';
            newImagePath = drill3;
            break;
          case 4:
            newName = 'drill4';
            newImagePath = drill4;
            break;
          case 5:
            newName = 'drill5';
            newImagePath = drill5;
            break;
        }

        if (newName != this.state.name) {
          break;
        }
      }
      this.setState({name: newName, imagePath: newImagePath});
    };
  }

  render() {

    return (
      <div style={{ background: '#ECECEC', padding: '5px' }}>
        <Row>
          <Col span={1}></Col>
          <Col span={22}>
            <Card title={this.state.name} bordered={false} >
              <img src={this.state.imagePath} style={{ maxWidth: '100%'}} />
            </Card>
          </Col>
          <Col span={1}></Col>
        </Row>
      </div>
    );
  }
}
